<template>
	<div>
		<div class="search">
			<span>
				卡号头部：
			</span>
			<el-input placeholder="按卡号头部查询" v-model="cardId" style="display: inline-block;width: 200px;" clearable>
			</el-input>
		</div>
		<div class="checkline">
			<el-button type="primary" icon="el-icon-plus" @click="openAdd">添加按钮</el-button>
			<div class="lacheck">
				归属：
				<el-radio v-model="radio" label="1">大客户</el-radio>
				<el-radio v-model="radio" label="2">代理</el-radio>
			</div>
			<div class="btns">
				<el-button icon="el-icon-search" @click="searchCard">查询</el-button>
				<el-button icon="el-icon-refresh" @click="reset">重置</el-button>
			</div>
		</div>
		<div class="list">
			<template>
				<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%">
					<el-table-column prop="id" label="ID">
					</el-table-column>
					<el-table-column prop="card_header" label="卡号头部">
					</el-table-column>
					<el-table-column prop="card_type" label="卡类型">
					</el-table-column>
					<el-table-column prop="affiliation" label="归属">
					</el-table-column>
					<el-table-column prop="address" label="操作">
						<el-button size="medium" @click="handleEdit">编辑</el-button>
						<el-button size="medium" type="danger" @click="handleDelete">删除</el-button>
					</el-table-column>
				</el-table>
			</template>
		</div>
		<div class="block">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			 :page-sizes="[4,8]" :page-size="100" layout="total, sizes, prev, pager, next" :total="tableData.length">
			</el-pagination>
		</div>
		<div class="dialog">
			<el-dialog title="添加新的卡号" :visible.sync="dialogVisible1" width="30%">
				<div class="as">
					卡号头部:<el-input style="width: 190px;" v-model="cardId" clearable></el-input>
				</div>
				<div class="as">
					卡类型:
					<el-cascader style="width: 190px;" :options="leixinOptions">
					</el-cascader>
				</div>
				<div class="as">
					卡归属:
					<el-cascader style="width: 190px;" :options="leixinOptions">
					</el-cascader>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible1=false">取消</el-button>
					<el-button @click="dialogVisible1=false" type="primary" >确 定</el-button>
				</span>
			</el-dialog>
			<el-dialog title="提示" :visible.sync="dialogVisible2" width="30%">
				<div class="as">
					<p style="text-align: left;">请输入新的卡号头部</p>
					<el-input v-model="cardId" clearable></el-input>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible2=false">取消</el-button>
					<el-button @click="dialogVisible2=false" type="primary" >确 定</el-button>
				</span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cardId: '',
				radio: '1',
				tableData: [],
				currentPage: 1,
				pageSize: 4,
				dialogVisible1: false,
				dialogVisible2: false,
				leixinOptions: [{
						value: 1,
						label: '实体卡'
					},
					{
						value: 2,
						label: '虚拟卡'
					}
				],
				guishuOptions: [{
						value: 1,
						label: '大客户'
					},
					{
						value: 2,
						label: '合伙人'
					}
				]
			}
		},
		watch: {
			radio(val, oldVal) {
				if(val === "1"){
					this.search({
						affiliation: '大客户'
					})
				}else {
					this.search({
						affiliation: '合伙人'
					})
				}
			}
		},
		methods: {
			handleSizeChange(val) {
				this.pageSize = val
			},
			handleCurrentChange(val) {
				this.currentPage = val
			},
			search(data) {
				this.axios.post("/api/findCardNumber", data)
					.then(res => {
						this.tableData = res.data.data
					})
			},
			searchCard() {
				this.search({
					card_header: this.cardId
				})
			},
			loadData(url) {
				this.axios.get(url)
					.then(res => {
						this.tableData = res.data.data
					})
			},
			reset() {
				this.cardId = '';
			},
			openAdd() {
				this.dialogVisible1 = true;
			},
			handleEdit(){
				this.dialogVisible2 = true;
			},
			handleDelete(){
				
			}

		},
		mounted() {
			this.loadData('/api/getCardNumber')
		}
	}
</script>

<style scoped>
	.search {
		padding: 20px 10px;
	}

	.search>span {
		margin-left: 30px;
	}

	.checkline {
		padding: 0px 40px;
	}

	.checkline::after {
		content: "";
		display: block;
		clear: both;
	}

	.checkline>div {
		display: inline-block;
	}

	.lacheck {
		display: inline-block;
		margin-left: 30px;
	}

	.btns {
		float: right;
	}

	.list {
		margin-top: 10px;
	}

	.block {
		display: flex;
		justify-content: center;
	}
	.as{
		width: 90%;
		margin-bottom: 10px;
		text-align: right;
	}
</style>
